<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <h1>axios响应拦截器</h1>
    <button id="btn">发送请求</button>
    <script>
        //配置axios实例
        const axios2 = axios.create({
            baseURL:'/',
            timeout:1,
            headers:{}
        })
        //添加响应拦截器，响应拦截器主要是把await拿到的值进行选择，只返回await拿到的值的data  响应拦截器很容易进入第二个回调函数中
        axios2.interceptors.response.use((config)=>{
            // console.log(config)//响应拦截器拿到的值为axios实例返回的promise实例的值,就是await的返回值
            /*config：
            config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 10000, adapter: ƒ, …}
            data: {code: 10000, msg: '请求成功', data: {…}}
            headers: {content-length: '81', content-type: 'application/json; charset=utf-8', date: 'Thu, 23 Jun 2022 03:12:54 GMT', etag: 'W/"51-S1t335na7oWF8+llh/pDTOzPDtQ"', x-powered-by: 'Express'}
            request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
            status: 200
            statusText: "OK"
            
            */
        //    所以可以通过这个值，给响应回来的数据做一些处理
       //1.在响应之前做点什么
        alert('拦截')
        return config.data.data//这样await中拿到的值就直接是数据了

        },(err)=>{//异常处理的回调，请求拦截器就相当于then中的一个回调函数，then中如果只是return了错误信息，then的返回值依然是一个成功的promise实例，值为错误信息而已，我们要达到的目的是then返回一个失败的promise实例，值为错误信息，所以就必须要return一个失败的promise实例，所以异常处理的回调函数中写return一个失败的promise实例，只有返回一个失败的promise实例，await才会退出，进到catch里处理异常
           //2.对响应错误做点什么
            return  Promise.reject(err.message)//这里如果返回的是err.message 那么await处理异常的catch语句中，接收的err就是这里返回的err.message了，直接打印err就能获取到错误信息


        })


    const btn =document.querySelector('#btn')
    btn.onclick = async function(){
        try{
        const re = await axios2.get('/user',{
            params:{
                userId:'001'
            }
        })
        console.log(re,'re')}//{name: 'gyl', age: 18, sex: 'female'}
        catch(e){
            console.log(e,'e1111')//错误信息
        }
            
    }
    </script>
</body>
</html>